<template>
  <!-- 物流信息 -->
  <div>
    <div class="logistics-info-header">
      <div class="logistics-info-header-left">
        <div class="logistics-status" :class="statusClass">{{ status }}</div>
        <div class="logistics-company">{{ this.info.logisticsCompany }}</div>
        <div class="logistics-no">{{ this.info.logisticsNo }}</div>
      </div>
    </div>
    <ul class="logistics-info-list">
      <li v-for="item in info.logisticsInfo" :key="item.time">
        <div class="logistics-info-list-time">{{ item.time }}</div>
        <div class="logistics-info-list-content">{{ item.content }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
import { statusObj } from '@/utils/Status'

export default {
  name: 'GoodsInfo',
  props: {
    info: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      statusObj: statusObj,
    }
  },

  computed: {
    status() {
      return this.statusObj[this.info.logisticsStatus][0]
    },
    statusClass() {
      return this.statusObj[this.info.logisticsStatus][1]
    },
  },
}
</script>

<style scoped>
.blue {
  color: blue;
}

.red {
  color: red;
}
.pink {
  color: pink;
}
.green {
  color: green;
}
</style>
